<template>
  <div class="login-box">
    <!-- 注册页面 -->
    <div class="loginbg" id="reg-login-box">
      <div class="regtitle" style="margin-bottom: 20px; display: flex; align-items: center; justify-content: space-around">
        <p>欢迎注册</p>
        <span @click="gotoLogin">使用已有账号登录</span>
      </div>
      <el-form ref="loginPhoneForm" :model="loginPhoneForm" :rules="rules" class="reg-form">
        <el-form-item prop="username">
          <el-input clearable prefix-icon="el-icon-username" class="text-style" v-model="loginPhoneForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input clearable type="password" prefix-icon="el-icon-pass" class="text-style" v-model="loginPhoneForm.password" placeholder="6-16位密码。区分大小写"></el-input>
        </el-form-item>
        <el-form-item prop="affirmPassword">
          <el-input clearable type="password" prefix-icon="el-icon-pass" class="text-style" v-model="loginPhoneForm.affirmPassword" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input clearable prefix-icon="el-icon-phone" class="text-style" v-model="loginPhoneForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <div style="display: flex; align-items: center;position: relative">
          <el-form-item prop="verifyCode" style="flex: 1">
            <el-input prefix-icon="el-icon-yanzheng" class="text-style" v-model="loginPhoneForm.verifyCode" placeholder="请输入短信验证码" clearable></el-input>
          </el-form-item>
          <el-form-item class="getyanzhengma" style="width:100px"> 
            <el-button :disabled="codeDisable" type="primary" style="margin-left: 10px; border: none; width: 120px; font-size: 20px; text-align: center" @click="getCode(loginPhoneForm.phone)">{{
              count
            }}</el-button>
          </el-form-item>

        
        </div>
        <el-form-item>
          <div class="submit">
            <el-button type="primary" style="width: 100%" @click="onReg">注 册</el-button>
          </div>
        </el-form-item>
      </el-form>
      <FootInfos></FootInfos>
    </div>
  </div>
</template>
<style lang="less" scoped>

/deep/.el-input__icon{
  margin-left: 8px;
}
/deep/  .el-icon-username {
    background: url('../../assets/login04.png') center center no-repeat;
    background-size: 22px;
}
/deep/ .el-icon-username:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
}

/deep/  .el-icon-pass {
    background: url('../../assets/login03.png') center center no-repeat;
    background-size: 22px;
}
/deep/ .el-icon-pass:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
}
/deep/  .el-icon-phone {
    background: url('../../assets/login02.png') center center no-repeat;
    background-size: 22px;
}
/deep/ .el-icon-phone:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
}

/deep/  .el-icon-yanzheng{
    background: url('../../assets/login01.png') center center no-repeat;
    background-size: 22px;
}
/deep/ .el-icon-yanzheng:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
}
@media screen and (max-width: 1900px){
    @import './index2.less';
 
      /deep/.el-input__icon {
    background-size: 20px;
    margin-left: 5px;
  }
}

@media screen and (min-width: 1900px) {
@import './index.less';
/deep/ #reg-login-box .el-form {
  height: 600px;
}

/deep/ #reg-login-box .regtitle {
  margin-bottom: 10px;
  height: 50px;
  line-height: 50px;
  color: white;
  font-size: 28px;
}

/deep/ #reg-login-box .regtitle span {
  color: white;
  font-size: 20px;
  cursor: pointer;
}



/deep/ #reg-login-box .el-form-item__error{
  font-size: 16px;
  margin: 5px 0px;
}
/deep/ #reg-login-box .el-form-item {
  width: 480px;
  height: 60px;
  margin-bottom: 30px;
}
/deep/ #reg-login-box .el-form-item__content {
  height: 60px;
}
/deep/ #reg-login-box .el-input {
  height: 60px;
}
/deep/ #reg-login-box .el-input__inner {
  height: 60px;
  font-size: 24px;
  border-radius: 10px;
}

/deep/ #reg-login-box .el-icon-user:before {
  content: '\e6e3';
  font-size: 22px;
  line-height: 60px;  
}
/deep/ #reg-login-box .el-input__icon {
  width: 50px;
}
/deep/ #reg-login-box .el-input--prefix .el-input__inner {
  padding-left: 75px;
}
/deep/ #reg-login-box .submit {
  width: 480px;
}
/deep/ #reg-login-box .submit .el-button {
  height: 80px;
  background-color: #409eff;
  margin-top: 20px;
  border-radius: 50px;
  font-size: 32px;
  margin-bottom: 50px;
  width: 480px;
}
/deep/ #reg-login-box .getyanzhengma {
  position: absolute;
  top: 10px;
  left: 320px;
  height: 60px;
  line-height: 60px;

}
/deep/ #reg-login-box .getyanzhengma .el-button {
  background-color: #fff;
  color: #409eff;
  border: 0px;
  font-size: 24px;
  vertical-align: middle;
    
}
/deep/ #reg-login-box .footinfos{
  margin-top: -10px;
 
}
}


</style>
<script>
import FootInfos from './footinfos'
import CryptoJS from '../../utils/CryptoJS'
export default {
  data() {
    return {
      loginPhoneForm: {
        username: '',
        phone: '',
        password: '',
        affirmPassword: '',
        verifyCode: '',
      }, //登录注册页面数据提交表单
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' },
        ],
        verifyCode: [
          { required: true, message: '请输入手机验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '请输入正确的验证码', trigger: 'blur' },
        ],
      },
      phoneRules: {},
      codeDisable: false,
      count: '获取验证码',
      timer: null,
      time: '60',
    }
  },
  created() {
    //获取验证码时间缓存
    const localTime = window.localStorage.getItem('time')
    if (localTime && localTime < 60 && localTime > 0) {
      this.time = localTime
      this.count = localTime
      this.codeDisable = true
      this.getCodeAction()
    }
    if (localTime == 0) {
      window.localStorage.setItem('time', 60)
    }
  },
  methods: {
    //注册
    onReg() {
      if (this.loginPhoneForm.password !== this.loginPhoneForm.affirmPassword) {
        return this.$message.error('两次输入密码不一致')
      }
      this.$refs.loginPhoneForm.validate((valid) => {
        if (!valid) return
        this.loginPhoneForm.password = CryptoJS.encrypt(this.loginPhoneForm.password) //密码加密
        this.loginPhoneForm.affirmPassword = CryptoJS.encrypt(this.loginPhoneForm.affirmPassword)
        this.$http.post('account/sysuser/register', this.loginPhoneForm).then((res) => {
          if (res.data.code === 0) {
            this.$message.success('注册成功，请到登录页面进行登录')
            this.$router.push({ path: '/login' })
          } else {
            this.$message.error(res.data.msg)
            this.loginPhoneForm.password = CryptoJS.decrypt(this.loginPhoneForm.password) //密码解密
            this.loginPhoneForm.affirmPassword = CryptoJS.decrypt(this.loginPhoneForm.affirmPassword)
          }
        })
      })
    },
    //获取验证码
    getCode(phone) {
      const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!phoneReg.test(phone)) {
        return this.$message.error('请输入正确的手机号码')
      }
      this.$http.get('account/sysuser/verify-code/' + phone, { params: { type: '1' } }).then((res) => {
        this.getCodeAction()
        if (res.data.code === 0) {
          this.codeDisable = true
          this.$message.success(res.data.data)
        } else {
          return this.$message.error(res.data.msg)
        }
      })
    },
    // 验证码倒计时
    getCodeAction() {
      if (!this.timer) {
        this.count = this.time
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= this.time) {
            this.count--
            window.localStorage.setItem('time', this.count)
          } else {
            clearInterval(this.timer)
            this.timer = null
            this.codeDisable = false
            this.count = '重新获取验证码'
            window.localStorage.setItem('time', 60)
            this.time = 60
          }
        }, 1000)
      }
    },
    gotoLogin() {
      // 已有账号跳转登录页面
      this.$router.push({ path: '/login' })
    },
  },
  components: {
    FootInfos, //底部组件
  },
}
</script>
